<template>
  <div class="header-bar">
    <button v-show="showBackBtn" class="back-btn" @click="back">
      <icon name="left-arrow" :scale="2" style="fill: #fff;"></icon>
    </button>

    <h2 class="title">{{title}}</h2>

    <slot name="right" class="right-btn"></slot>
  </div>
</template>

<script>
  export default{
    name: 'HeaderBar',
    props: {
      showBackBtn: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      }
    },
    methods: {
      back(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .header-bar{
    // position: absolute;
    // z-index: 999;
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: @height-header-bar;
    padding-right: 8px;
    background-color: @color-theme-blue-medium;
    .back-btn{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: @height-header-bar;
      border: none;
      outline: none;
      background-color: transparent;
    }
    .title{
      height: @height-header-bar;
      line-height: @height-header-bar;
      font-size: @font-size-h2;
      font-weight: 400;
      color: #fff;
    }
    .right-btn{
      margin-left: auto;
      margin-right: 0;
    }
  }
</style>
